package com.klod.news.page.news

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.DeviceThermostat
import androidx.compose.material.icons.filled.Pageview
import androidx.compose.material.icons.filled.ThumbUp
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.paging.LoadState
import androidx.paging.compose.LazyPagingItems
import androidx.paging.compose.itemKey
import com.composables.icons.lucide.Eye
import com.composables.icons.lucide.Lucide
import com.klod.news.R
import com.klod.news.data.bean.NewsDetailBean
import com.klod.news.viewmodel.MainActivityVm
import com.klod.news.widget.HorizontalSpacer
import com.klod.news.widget.NetworkImage
import com.klod.news.widget.LottieLoading
import com.klod.news.widget.TextWithIcon
import com.klod.news.widget.VerticalSpacer


@Composable
fun NewsList(
    modifier: Modifier = Modifier, data: LazyPagingItems<NewsDetailBean>,
    vm: MainActivityVm
) {


    val lazyPagingItems = data
    LazyColumn(
        modifier = modifier,
        contentPadding = PaddingValues(12.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
    ) {
        if (lazyPagingItems.loadState.refresh == LoadState.Loading) {
            item {
                LottieLoading()
            }
        }

        items(count = lazyPagingItems.itemCount, key = lazyPagingItems.itemKey()) { index ->
            val item = lazyPagingItems[index] ?: NewsDetailBean()
            NewsListItem(
                Modifier,
                item,
                vm
            )
        }

        if (lazyPagingItems.loadState.append == LoadState.Loading) {
            item {
                LottieLoading(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentWidth(Alignment.CenterHorizontally)
                )
            }
        }
    }

}

@Composable
fun NewsListItem(
    modifier: Modifier = Modifier, item: NewsDetailBean,
    vm: MainActivityVm
) {

    Row(modifier = modifier) {
//        .fillMaxWidth().aspectRatio(1.0f)
        NetworkImage(
            url = item.image, modifier = Modifier
                .size(100.dp)
                .clip(
                    RoundedCornerShape(8.dp)
                )
        )
        HorizontalSpacer(12.dp)
        Column {

            Text(
                item.title,
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,

                style = MaterialTheme.typography.titleMedium
            )
            VerticalSpacer(12.dp)
            Row {
                Text(
                    item.author,
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f)
                )

                HorizontalSpacer(8.dp)

                Text(
                    item.date.split(" ")[0],
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f)
                )

                HorizontalSpacer(8.dp)

                TextWithIcon(
                    text = "${item.view}",iconSize = 15,
                    icon = Lucide.Eye,
                    iconTint = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f),
                    textStyle = MaterialTheme.typography.bodySmall.copy(
                        color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f)
                    )
                )

                HorizontalSpacer(8.dp)

                TextWithIcon(
                    text = "${item.like}", icon = Icons.Filled.ThumbUp, iconSize = 13,
                    iconTint = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f),
                    textStyle = MaterialTheme.typography.bodySmall.copy(
                        color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.5f)
                    )
                )

            }
        }


    }

}